<template>
  <div class="param-main">
    <el-radio-group v-model="radio1" size="small" @change="scrollOn">
      <el-radio-button
        :label="item.name"
        v-for="(item, index) in letter"
        :key="index"
      ></el-radio-button>
    </el-radio-group>
    <div class="page-pane2">
        <el-button size="small" type="info" @click="detailTblMain(1)">新增</el-button>
      </div>
    <div style="overflow: auto;height: calc(100% - 85px);">
      <div class="page_content">
        <div class="brand" v-for="item in brandsList" :key="item.id">
          <!-- <span @click="getCs(item)">{{ item.name }}</span> -->
          <span >{{ item.name }}</span>
          <i
            class="el-icon-setting"
            style="margin-left: 5px"
            @click="detailTblMain(2, item)"
          ></i>
          <i class="el-icon-close brand_del" @click="deleteEvent(item)"></i>
        </div>
      </div>
    </div>
    <add-brand
      ref="addBrand"
      v-if="visible"
      @ok="saveData"
      @cancle="cancle"
      :title="title"
      :row="rowData"
    ></add-brand>
  </div>
</template>
<script>
import AddBrand from './addBrand'
import {
  addCarLetter,
  delCarLetter,
  upCarLetter,
  getCarLetterList
} from '@/api/carLine'
export default {
  name: 'applyMain',
  props: ['pageData'],
  components: {
    AddBrand
  },
  data() {
    return {
      visible: false,
      radio1: '全部',
      rowData: {},
      title: '',
      letter: [],
      brandsList: [],
      brands: []
    }
  },
  watch: {},
  mounted() {
    for (var i = 0; i < 26; i++) {
      let op = {
        name: String.fromCharCode(65 + i),
        id: i
      }
      this.letter.push(op)
    }
    this.letter.unshift({
      name: '全部',
      id: ''
    })
    this.getBrandsList().then(() => {
      this.scrollOn()
    })
  },
  methods: {
    /**
     * 获取品牌列表信息
     */
    getBrandsList() {
      return new Promise((resolve) => {
        let data = {
          page: 1,
          size: 1000
        }
        getCarLetterList(data).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.brands = data.content
            resolve()
          } else {
            this.$message.error(data)
          }
        })
      })
    },
    /**
     * 按字母分类数据
     */
    scrollOn() {
      this.brandsList = []
      if (this.radio1 != '全部') {
        this.brands.forEach((el) => {
          if (el.initial.charAt(0) == this.radio1) {
            this.brandsList.push(el)
          }
        })
      } else {
        this.brandsList = this.brands
      }
    },
    /**
     * 点击品牌跳转到车系页面
     */
    getCs(item) {
      let data = item
      data.path = '/qpProductData/brand'
      this.$router.push({
        path: '/qpProductData/carSeries',
        query: {
          data: data
        }
      })
    },
    /**
     * 删除
     */
    deleteEvent(item) {
      let ids = [item.id]
      this.$confirm('此操作将永久删除该品牌, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delCarLetter(ids).then((res) => {
            const { code = undefined, data = {} } = res.data
            if (!code) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.getBrandsList().then(() => {
                this.scrollOn()
              })
            } else {
              this.$message({
                type: 'error',
                message: '操作失败!'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    /**
     * 点击功能按钮
     */
    detailTblMain(type, row) {
      switch (type) {
        case 1:
          this.title = '新增品牌'
          this.rowData = {}
          break
        case 2:
          this.title = '修改品牌'
          this.rowData = JSON.parse(JSON.stringify(row))
          break
        case 3:
          this.title = '品牌详情'
          this.rowData = JSON.parse(JSON.stringify(row))
          break
        default:
          this.title = ''
          this.rowData = {}
          break
      }
      this.visible = true
    },
    /**
     * 保存
     */
    saveData(val) {
      if (this.title == '新增品牌') {
        addCarLetter(val).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getBrandsList().then(() => {
              this.scrollOn()
            })
            this.cancle()
          } else {
            this.$message({
              type: 'error',
              message: '操作失败!'
            })
          }
        })
      } else {
        upCarLetter(val).then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.getBrandsList().then(() => {
              this.scrollOn()
            })
            this.cancle()
          } else {
            this.$message({
              type: 'error',
              message: '操作失败!'
            })
          }
        })
      }
    },
    /**
     * 关闭弹框
     */
    cancle() {
      this.visible = false
    }
  }
}
</script>
<style scoped lang="scss">
.param-main {
  overflow:hidden ;
.page_content {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  .brand {
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    align-items: center;
    width: 15%;
    padding: 10px;
    // cursor: pointer;
    // span:focus {
    //   color: #fff;
    //   background-color: #409eff;
    //   border-color: #409eff;
    //   box-shadow: -1px 0 0 0 #409eff;
    // }
    // span:hover,
    i:hover {
      color: #409eff;
      background-color: #fff;
      border-color: #409eff;
    }
    .brand_del {
      margin-left: 10px;
    }
  }
}
}
</style>
